<template>
  <!-- 购物车 -->
  <div class="cartBox">
    <!-- 标题 -->
    <x-header :left-options="{showBack: false,backText:''}" class="headerBox">
      <span>购物车</span>
      <div slot="right" class="headRight">
        <span v-if="!editStatus" @click="editStatus=!editStatus">编辑</span>
        <span v-else @click="editStatus=!editStatus">完成</span>
      </div>
    </x-header>
    <checker v-model="goodsChecked" type="checkbox" @on-change="checkerChange">
      <div v-for="(item,index) in goodsList" :key="index" class="listBox">
        <div class="shop flex">
          <checker-item :value="item.id">
            <check-icon :value="item.checked" class="allCheckBox" @click.native="shopSelect(item)"></check-icon>
          </checker-item>
          <router-link to class="shopTitle flex">
            <span>{{item.shop}}</span>
            <x-icon type="ios-arrow-right" size="20" style="fill:#ccc;"></x-icon>
          </router-link>
          <div class="neckQuan" @click="lqPOP = true">领券</div>
        </div>
        <checker v-model="item.itemChecked" type="checkbox">
          <span>{{item.itemChecked}}</span>
          <div v-for="(item2,index2) in item.innerList" :key="index2" class="contBox flex">
            <checker-item :value="item2.id">
              <check-icon
                :value="item2.checked"
                class="allCheckBox"
                @click.native="goodSelect(item,item2)"
              ></check-icon>
            </checker-item>
            <div class="imgBox">
              <img :src="item2.img" alt class="goodsImg" />
            </div>
            <div class="detail">
              <div class="title">{{item2.title}}</div>
              <div class="config clearfix" @click="pzPOP = true">
                <span>{{item2.config}}</span>
                <x-icon type="ios-arrow-down" size="18" style="fill:#ccc;float:left"></x-icon>
              </div>
              <div class="infoBottom flex_sb">
                <span class="money">￥{{item2.money}}</span>
                <inline-x-number
                  v-model="item2.num"
                  class="count"
                  width="30px"
                  :min="1"
                  button-style="round"
                  @click.native="countChange"
                ></inline-x-number>
              </div>
            </div>
          </div>
        </checker>
      </div>
    </checker>
    <span>{{goodsChecked}}</span>
    <!-- 底部结算 -->
    <div class="footerBox flex_sb">
      <check-icon :value="allCheck" class="allCheckBox" @click.native="checkAll(!allCheck)">全选</check-icon>
      <div class="operateBox flex">
        <div v-if="!editStatus" class="info">
          <div class="totle flex">
            <span>合计：</span>
            <span class="money">￥{{totalMoney}}</span>
          </div>
          <div class="freight">含运费：￥0</div>
        </div>
        <div v-if="!editStatus" class="settle btn">去结算</div>
        <div v-else class="delete btn">删除</div>
      </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="like">
      <div class="likeTitle">
        <img src="../assets/images/157793128909842388.png" alt />
      </div>
      <ul class="likeUl clearfix">
        <li v-for="(item,index) in likeList" :key="index">
          <router-link to="goodsInfo" class="linkBox">
            <img :src="item.img" alt />
            <div class="content">
              <div class="title">{{item.title}}</div>
              <div class="tag flex">
                <div
                  class="tagItem"
                  :class="item2=='自营'?'zy':''"
                  v-for="(item2,index2) in item.tags"
                  :key="index2"
                >{{item2}}</div>
              </div>
              <div class="footer flex">
                <div class="money">￥{{item.money}}</div>
                <div class="evaluate">{{item.evaluate}}+评论</div>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <!-- 商品配置pop -->
    <popup v-model="pzPOP" class="pzBox" height="500px" is-transparent>
      <div class="popupIn">
        <div class="taxContent">
          <div class="headBox flex">
            <x-icon type="ios-close-empty" size="30" class="popupClose" @click="pzPOP=false"></x-icon>
            <div class="imgBox">
              <img src="../assets/images/K-YqKgBJgNkeGJlPzKtwTw.jpg" alt />
            </div>
            <div class="cont">
              <p class="money">￥{{product.money}}</p>
              <p class="shopNum">商家编号:102132154131</p>
              <p class="title">{{product.title}}</p>
            </div>
          </div>
          <div class="innerBox">
            <div class="configBox">
              <div class="title">颜色</div>
              <div class="configList clearfix">
                <div
                  v-for="(item,index) in product.model"
                  class="listItem"
                  :class="index == modelIndex?'active':''"
                  :key="index"
                  @click="modelClick(index,item)"
                >
                  <img :src="item.img" alt />
                  <span>{{item.cont}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="btnBox flex">
            <div class="ticket">确定</div>
          </div>
        </div>
      </div>
    </popup>
    <!-- 领券Pop -->
    <popup v-model="lqPOP" class="lqBox" height="60%" is-transparent>
      <div class="popupIn">
        <div class="popupTitle">
          领取优惠券
          <x-icon type="ios-close-empty" size="30" class="popupClose" @click="lqPOP=false"></x-icon>
        </div>
        <div class="taxContent">
          <div class="quanList flex_sb">
            <img src="../assets/images/quan-got2.png" alt class="quanImg" />
            <div class="detail">
              <p class="price">
                <i>¥</i>
                <span class="price-num">5.00</span>
              </p>
              <p class="time">有效期：2020.01.13-2020.03.01</p>
              <p class="condition">满7000用200</p>
            </div>
            <div class="gain">
              <router-link to class="btn">已领取</router-link>
            </div>
          </div>
          <div class="quanList flex_sb">
            <img src="../assets/images/quan.png" alt class="quanImg" />
            <div class="detail">
              <p class="price">
                <i>¥</i>
                <span class="price-num">5.00</span>
              </p>
              <p class="time">有效期：2020.01.13-2020.03.01</p>
              <p class="condition">满7000用200</p>
            </div>
            <div class="gain">
              <router-link to class="goUse">立即领取</router-link>
            </div>
          </div>
          <div class="quanList flex_sb">
            <img src="../assets/images/quan.png" alt class="quanImg" />
            <div class="detail">
              <p class="price">
                <i>¥</i>
                <span class="price-num">5.00</span>
              </p>
              <p class="time">有效期：2020.01.13-2020.03.01</p>
              <p class="condition">满7000用200</p>
            </div>
            <div class="gain">
              <router-link to class="goUse">立即领取</router-link>
            </div>
          </div>
        </div>
      </div>
    </popup>
    <tabBar></tabBar>
  </div>
</template>

<script>
import {
  XHeader,
  Checklist,
  Checker,
  CheckerItem,
  CheckIcon,
  InlineXNumber,
  Popup,
  Cell,
  Group
} from "vux";
import TabBar from "@/components/tabBar";
export default {
  components: {
    TabBar,
    XHeader,
    Checklist,
    Checker,
    CheckerItem,
    CheckIcon,
    InlineXNumber,
    Popup,
    Cell,
    Group
  },
  data() {
    return {
      editStatus: false,
      allCheck: false,
      pzPOP: false,
      lqPOP: false,
      modelIndex: 0,
      goodsChecked: [],
      totalMoney: 0,

      // 商品列表
      goodsList: [
        {
          id: "1",
          shop: "HK国际海外专营店",
          innerList: [
            {
              id: "101",
              title:
                "【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙降噪耳机 入耳式运动耳麦降噪豆 1000X第三代 铂金银",
              money: "1000",
              img: require("../assets/images/K-YqKgBJgNkeGJlPzKtwTw.jpg"),
              config: "WF-1000XM3 铂金银",
              num: 1
            },
            {
              id: "102",
              title:
                "【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙降噪耳机 入耳式运动耳麦降噪豆 1000X第三代 铂金银",
              money: "1000",
              img: require("../assets/images/K-YqKgBJgNkeGJlPzKtwTw.jpg"),
              config: "WF-1000XM3 铂金银",
              num: 1
            }
          ]
        },
        {
          id: "2",
          shop: "贵州茅台直营店",
          innerList: [
            {
              id: "201",
              title: "国酒茅台",
              money: "2000",
              img: require("../assets/images/fKIm1WnLPEXGcYtc9COhyQ.png"),
              config: "飞天茅台",
              num: 2
            }
          ]
        },
        {
          id: "3",
          shop: "假冒茅台直营店",
          innerList: [
            {
              id: "301",
              title: "国酒茅台",
              money: "10",
              img: require("../assets/images/fKIm1WnLPEXGcYtc9COhyQ.png"),
              config: "飞天茅台",
              num: 1
            }
          ]
        }
      ],
      product: {
        money: "1000",
        source: "苏宁国际",
        title:
          "【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙降噪耳机 入耳式运动耳麦降噪豆 1000X第三代 铂金银",
        tags: ["日本品牌", "海外直邮", "跨境商品"],
        point:
          "【限 时 抢 购】全年抄底价，活动过后恢复原价！ 【晒图有 礼】10字心得+晒图即可获得5元感谢金！（视下 单金额而定） 【放心购】残损补偿，破损包赔，闪电到货，晚到必赔！ 【店铺背景】全程海关国检平台三重监管，香港实体公司经营更加值得信赖！感谢您的支持！",
        // 型号
        model: [
          {
            img: require("../assets/images/K-YqKgBJgNkeGJlPzKtwTw.jpg"),
            cont: "WH-1000XM3白色"
          },
          {
            img: require("../assets/images/K-YqKgBJgNkeGJlPzKtwTw.jpg"),
            cont: "WH-1000XM3黑色"
          },
          {
            img: require("../assets/images/K-YqKgBJgNkeGJlPzKtwTw.jpg"),
            cont: "WH-1000XM3红色"
          }
        ]
      },
      // 猜你喜欢
      likeList: [
        {
          img: require("../assets/images/K-YqKgBJgNkeGJlPzKtwTw.png"),
          title:
            "【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙降噪耳机 入耳式运动耳麦降噪豆 1000X第三代 铂金银",
          tags: ["自营", "大聚惠"],
          money: "1548",
          evaluate: "100"
        },
        {
          img: require("../assets/images/fKIm1WnLPEXGcYtc9COhyQ.png"),
          title: "飞天53%vol 500ml贵州茅台酒（带杯） 酱香型白酒",
          tags: ["领券39-10"],
          money: "1499",
          evaluate: "100"
        },
        {
          img: require("../assets/images/fKIm1WnLPEXGcYtc9COhyQ.png"),
          title: "飞天53%vol 500ml贵州茅台酒（带杯） 酱香型白酒",
          tags: ["领券39-10"],
          money: "1499",
          evaluate: "100"
        },
        {
          img: require("../assets/images/K-YqKgBJgNkeGJlPzKtwTw.png"),
          title:
            "【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙降噪耳机 入耳式运动耳麦降噪豆 1000X第三代 铂金银",
          tags: ["自营", "大聚惠"],
          money: "1548",
          evaluate: "100"
        }
      ]
    };
  },
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f8f9fa");
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
  methods: {
    // 选择型号
    modelClick(index, data) {
      this.modelIndex = index;
    },
    checkerChange(value) {
      console.log(value);
    },
    // 店铺商品单选
    goodSelect(item, item2) {
      //判断是否未定义，如果没点击过按钮是没有注册的，则需要先注册checked属性
      if (typeof item2.checked == "undefined") {
        this.$set(item2, "checked", true);
      } else {
        //  如果已经注册，则设置checked否(这里不能设置为false,因为当已经注册过之后再点击为flase，那么再点击一次则为true)
        item2.checked = !item2.checked;
      }
      // 当所有的商品都选择的时候，自动默认为全选
      setTimeout(() => {
        this.goodsList.length == this.goodsChecked.length
          ? this.checkAll(true)
          : (this.allCheck = false);
      }, 0);
      // 当所有的商品都选择的时候，自动默认为全选
      this.$nextTick(() => {
        console.log(item.itemChecked.length == item.innerList.length);
        if (item.itemChecked.length == item.innerList.length) {
          item.checked = true;
          this.goodsChecked.push(item.id);
        } else {
          if (typeof item.checked == "undefined") {
            this.$set(item, "checked", false);
          }
          item.checked = false;
          let ID = item.id;
          this.goodsChecked.map((res, index) => {
            if (ID == res) {
              this.goodsChecked.splice(index, 1);
            }
          });
        }
      });
      this.totalPrice();
    },
    // (单选)选择店铺
    shopSelect(item) {
      //判断是否未定义，如果没点击过按钮是没有注册的，则需要先注册checked属性
      if (typeof item.checked == "undefined") {
        this.$set(item, "checked", true);
        this.$set(item, "itemChecked", []);
        item.innerList.map(res => {
          this.$set(res, "checked", true);
          item.itemChecked.push(res.id);
        });
      } else {
        //  如果已经注册，则设置checked否(这里不能设置为false,因为当已经注册过之后再点击为flase，那么再点击一次则为true)
        item.checked = !item.checked;
        // 改变店铺商品是否选中
        if (item.checked) {
          item.itemChecked = [];
          item.innerList.map(res => {
            res.checked = true;
            item.itemChecked.push(res.id);
          });
        } else {
          item.itemChecked = [];
          item.innerList.map(res => {
            res.checked = false;
          });
        }
        // item.checked ? this.checkNum++ : this.checkNum--;
      }
      // 当所有的商品都选择的时候，自动默认为全选
      setTimeout(() => {
        this.goodsList.length == this.goodsChecked.length
          ? this.checkAll(true)
          : (this.allCheck = false);
      }, 0);
      this.totalPrice();
    },
    // 全选
    checkAll(flag) {
      this.allCheck = flag;
      this.goodsList.map((item, index) => {
        if (typeof item.checked == "undefined") {
          //也要防止未定义
          this.$set(item, "checked", this.allCheck); //通过set来给item添加属性checked
          this.$set(item, "itemChecked", []);
          item.innerList.map(res => {
            this.$set(res, "checked", true);
            item.itemChecked.push(res.id);
          });
        } else {
          item.checked = this.allCheck;
          item.itemChecked = [];
          item.innerList.map(res => {
            res.checked = false;
          });
        }
      });
      if (flag) {
        this.goodsChecked = [];
        this.goodsList.map((item, index) => {
          item.itemChecked = [];
          this.goodsChecked.push(item.id);
          item.innerList.map(res => {
            this.$set(res, "checked", true);
            item.itemChecked.push(res.id);
          });
        });
      } else {
        this.goodsChecked = [];
      }
      this.totalPrice();
    },
    // 求总价
    totalPrice() {
      this.totalMoney = 0;
      var itemTotal = 0;
      this.$nextTick(() => {
        this.goodsList.forEach((item, index) => {
          // 店铺选中 默认计算该店铺下所有商品价格
          if (item.checked) {
            // this.totalMoney += this.$setNum.accMul(item.price, item.sales_num);
            item.innerList.map((item2, index2) => {
              itemTotal += parseInt(item2.money * item2.num);
            });
            this.totalMoney += itemTotal;
            itemTotal = 0;
          } else {
            // 店铺为选中 但又部分商品勾选
            item.innerList.map((item2, index2) => {
              if (item2.checked) {
                itemTotal += parseInt(item2.money * item2.num);
                this.totalMoney += itemTotal;
                itemTotal = 0;
              }
            });
          }
        });
      });
    },
    // 计数按钮事件
    countChange() {
      this.$nextTick(() => {
        this.totalPrice();
      });
    }
  }
};
</script>

<style lang="less" scoped>
.cartBox {
  padding-bottom: 200px;
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    // position: fixed;
    // top:0;
    // left: 0;
    // right: 0;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
      margin: 0 80px;
    }
    .vux-header-right {
      color: #000;
      .headRight {
        margin-right: -10px;
        img {
          width: 40px;
        }
      }
    }
  }
  // 商品详情
  .listBox {
    padding: 0 20px;
    background-color: #fff;
    border-radius: 20px;
    margin: 0 20px;
    margin-top: 20px;
    .shop {
      padding: 10px 0px;
      .shopTitle {
        span {
          font-size: 30px;
          color: #222;
        }
      }
      .neckQuan {
        margin-left: auto;
        font-size: 28px;
      }
    }
    .contBox {
      padding-bottom: 20px;
      // align-items: end;
      .imgBox {
        position: relative;
        margin-right: 20px;
        width: 200px;
        border-radius: 20px;
        overflow: hidden;
        flex-shrink: 0;
        .goodsImg {
          width: 100%;
        }
        &:after {
          content: "";
          top: 0;
          right: 0;
          background-color: #000;
          z-index: 1;
          opacity: 0.06;
          bottom: 0;
          position: absolute;
          left: 0;
        }
      }
      .detail {
        flex-grow: 1;
        .title {
          font-size: 30px;
          font-weight: bold;
          overflow: hidden;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          display: -webkit-box;
          text-overflow: ellipsis;
          max-height: 100px;
        }
        .config {
          background: #f6f6f6;
          padding: 0 10px;
          max-width: 270px;
          display: inline-block;
          margin-top: 10px;

          span {
            display: inline-block;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: 230px;
            float: left;
          }
        }
        .infoBottom {
          margin-top: 15px;
          .money {
            font-weight: bold;
            font-size: 30px;
            color: #f42;
          }
          /deep/.count {
            transform: scale(0.8);
            margin-left: auto;
            margin-right: -10px;
            .weui-cell {
              font-size: 30px;
              padding: 20px 0;
            }

            .vux-number-selector {
              border: 2px solid #fc0;
              svg {
                fill: #fc0;
              }
              &.vux-number-disabled {
                svg {
                  fill: #ccc;
                }
              }
            }
          }
        }
      }
    }
  }
  // 猜你喜欢
  .like {
    .likeTitle {
      img {
        width: 100%;
        margin-top: 20px;
      }
    }
    .likeUl {
      list-style: none;
      padding: 20px;
      li {
        float: left;
        width: 49%;
        border-radius: 20px;
        margin-right: 2%;
        margin-bottom: 20px;
        box-sizing: border-box;
        padding: 20px;
        background-color: #fff;
        .linkBox {
          color: currentColor;
        }
        img {
          width: 100%;
        }
        .content {
          .title {
            margin: 10px auto 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal;
          }
          .tag {
            margin: 10px 0;
            .tagItem {
              border: 2px solid #fb0;
              padding: 0 5px;
              border-radius: 10px;
              margin: 0 10px;
            }
            .zy {
              background-color: #fb0;
            }
          }
          .footer {
            .money {
              color: #f42;
              font-weight: bold;
              font-size: 30px;
            }
            .evaluate {
              color: #999;
              margin-left: 20px;
              font-size: 28px;
            }
          }
        }
      }
      li:nth-child(2n) {
        margin-right: 0;
      }
    }
  }
  // 底部视图
  .footerBox {
    padding: 10px 20px;
    background-color: #fff;
    position: fixed;
    bottom: 100px;
    left: 0;
    right: 0;
    border-top: 2px solid #e4e4e4;
    z-index: 2;
    .allCheckBox {
    }
    .operateBox {
      .info {
        margin-right: 10px;
        line-height: 1.2;
        .totle {
          .money {
            font-size: 30px;
            font-weight: bold;
            color: #ff4422;
          }
        }
        .freight {
        }
      }
      .btn {
        background-color: #ffcc00;
        font-weight: bold;
        width: 200px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        border-radius: 20px;
      }
    }
  }
  // popup格式
  .popupIn {
    width: 98%;
    height: 99%;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 5px;
    position: relative;
    overflow: auto;
    .popupTitle {
      font-size: 32px;
      font-weight: bold;
      text-align: center;
      padding: 20px 0;
      border-bottom: 1px solid #eee;
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      z-index: 2;
      background-color: #fff;
      .popupClose {
        position: absolute;
        top: 20px;
        right: 20px;
        fill: #000;
      }
    }
  }
  // 配置POP
  .pzBox {
    .taxContent {
      padding: 0 20px;
      .popupClose {
        position: absolute;
        right: 20px;
        top: 20px;
      }
      .headBox {
        padding: 20px 0;
        border-bottom: 2px solid #eee;
        position: fixed;
        width: 94%;
        background-color: #fff;
        z-index: 5;
        .imgBox {
          border-radius: 20px;
          border: 2px solid #eee;
          margin-top: -80px;
          width: 520px;
          overflow: hidden;
          left: 40px;
          img {
            width: 100%;
          }
        }
        .cont {
          padding-left: 20px;
          box-sizing: border-box;
          .money {
            color: #ff4422;
            font-size: 30px;
          }
          .shopNum {
            color: #999;
          }
          .title {
            height: 115px;
            overflow: hidden;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            display: -webkit-box;
            text-overflow: ellipsis;
          }
        }
      }
      .innerBox {
        padding-top: 240px;
        overflow: auto;
        height: 640px;
        &::-webkit-scrollbar {
          display: none;
        }
        .configBox {
          .title {
            font-size: 30px;
            padding: 10px 0;
          }
          .configList {
            .listItem {
              border: 2px solid #f5f5f5;
              background: #f6f6f6;
              height: auto;
              line-height: 24px;
              padding: 2px 4px;
              float: left;
              display: flex;
              align-items: center;
              margin: 10px;
              border-radius: 20px;
              padding: 5px 10px;
              box-sizing: border-box;
              overflow: hidden;
              &:active {
                border: 2px solid #fc0;
                background: #ffeda2;
              }
              &.active {
                border: 2px solid #fc0;
                background: #ffeda2;
              }
              img {
                width: 50px;
                height: 50px;
              }
              span {
                margin-left: 10px;
              }
            }
          }
        }
      }
      .btnBox {
        border-radius: 20px;
        overflow: hidden;
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        background-color: #fff;
        div {
          width: 100%;
          height: 80px;
          line-height: 80px;
          text-align: center;
          font-size: 30px;
        }
        .ticket {
          background-color: #ffcc00;
        }
      }
    }
  }
  // 领券
  .lqBox {
    .taxContent {
      padding: 20px;
      .quanList {
        align-items: center;
        color: #f50;
        margin: 20px 0;
        position: relative;
        .quanImg {
          width: 100%;
          position: absolute;
          z-index: 0;
        }
        .detail {
          width: 60%;
          z-index: 1;
          padding: 20px 20px 30px;
          .price {
            color: #f50;
            font-size: 28px;
            .price-num {
              font-weight: 600;
              font-size: 60px;
              font-family: impact, serif;
              margin: 0 10px;
            }
          }
        }
        .gain {
          z-index: 1;
          width: 30%;
          text-align: center;
          font-size: 30px;
          color: #f50;
          .btn {
            color: #f50;
          }
          .goUse {
            width: 80%;
            display: block;
            color: currentColor;

            box-sizing: border-box;
            margin: 0 auto;
            text-align: center;
            padding: 4px 10px;
            border-radius: 20px;
            border: 2px solid #f50;
          }
        }
      }
    }
  }
  // 全选框
  /deep/ .weui_icon_success {
    &::before {
      color: #ffc04a;
    }
  }
}
</style>